<!-- @format -->

<template>
  <div class="render">
	  <h1>账户信息修改</h1>
    <el-form
      ref="form"
      :model="form"
      size="small"
      :inline="false"
      label-position="top"
    >
	<el-row>
		<el-col :span="8" :offset="6"><div class="grid-content bg-purple-light">
请输入手机号码：
		</div></el-col>
	  <el-col :span="4"><div class="grid-content bg-purple">
	  	<el-input v-model="form.phone" placeholder="请输入手机号"  :span="8"></el-input>
	  </div></el-col>
	  <el-col :span="4"><div class="grid-content bg-purple">
	  	<el-button @click="send()" type="text">发送验证码</el-button>
	  </div></el-col>
	</el-row>
	<br>
	<el-row >
		<el-col :span="8" :offset="6"><div class="grid-content bg-purple-light">
			请输入手机验证码：
		</div></el-col>
	  <el-col :span="4"><div class="grid-content bg-purple">
	  	<el-input v-model="form.CheckNum" placeholder="请输入手机验证码"  :span="8"></el-input>
	  </div></el-col>
	</el-row>
	<br>
	<el-row>
		<el-col :span="8" :offset="6"><div class="grid-content bg-purple-light">
	请输入您的新密码：
		</div></el-col>
	  <el-col :span="4"><div class="grid-content bg-purple">
	  	<el-input v-model="form.password" placeholder="请输入新密码"  :span="8"></el-input>
	  </div></el-col>
	</el-row>
	<br>
   <div class="demo-input-suffix">
	<el-row>
		<el-col :span="8" :offset="6"><div class="grid-content bg-purple-light">
				请确认您的新密码：
		</div></el-col>
	  <el-col :span="4"><div class="grid-content bg-purple">
	  	<el-input v-model="form.confirmpwd" placeholder="请确认新密码"  :span="8"></el-input>
	  </div></el-col>
	</el-row>
	</div>
	<br>
	<el-row>
	<el-col :span="4" :offset="8"><div class="grid-content bg-purple">
	  	<el-button
	  	position="center"
	  	  type="primary"
	  	  class="login-btn"
	  	  style="width: 100%;"
	  	  @click="submit()"
	  	>
	  	  确认修改
	  	</el-button>
	  </div>
	  </el-col>
	</el-row>
    </el-form>
  </div>
</template>
<script>

export default {
  created() {
    this.axios
      .get('getFormData')
      .then(data => {
        if (data.errno === 0) {
          this.formData = data.data
          console.log(this.formData)
        } else {
          console.log(data.msg)
        }
      })
      .catch(error => {
        console.log(error)
      })
  },
  data() {
    return {
      form: {
		  phone:'',
		  CheckNum:'',
		  password:'',
		  confirmpwd:'',
	  }
    }
  },
  methods: {
    submit(){
		alert('账户信息修改成功！')
	},
	send(){
		alert('这就发了')
	},
    show(value) {
      console.log(1)
      console.log(value)
    }
  },
  watch: {
    formData: {
      handler: function(newVal) {
        console.log(newVal)
      },
      deep: true
    }
  },
  components: {
  }
}
</script>
<style lang="less" scoped>
.render {
  padding: 16px;
  margin-bottom: 16px;
  background-color: #ffffff;
}
.login {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgb(32, 160, 255);

  .middle-wrapper {
    position: fixed;
    width: 100%;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-60%);

    .title-wrapper {
      margin-top: 50px;
      margin-bottom: 30px;
      text-align: center;
      font-size: 30px;
      font-weight: bold;
      color: #ffffff;
    }
    .login-form {
      position: relative;
      margin: 0 auto;
      width: 520px;
      padding: 30px 50px;
      box-sizing: border-box;
      border-radius: 5px;
      background-color: #ffffff;

      .el-row {
        margin-bottom: 20px;

        &:last-child {
          margin-bottom: 0;
        }

        .login-btn {
          width: 100%;
        }
      }

      .check-code-wrapper {
        display: flex;
        justify-content: space-between;
        height: 40px;

        .yanzhengma-wrapper {
          flex: 0 1 auto;
        }

        .validate-code-wrapper {
          flex: 0 0 160px;
        }
      }
    }
  }
}
</style>
